<script setup>
import { useUserStore } from '@/stores/userStore';
import { useRouter } from 'vue-router';

const userStore = useUserStore();
const router = useRouter();

// 如果未登录，重定向到登录页
if (!userStore.isLoggedIn) {
  router.push('/user/login');
}
const user = {
  username: 'admin',
  gender: '男',
  post: '软件工程师',
  sign: '这个人很懒，什么也没留下',
};
const activityIndex = 1;
const myArticleList = ['001'];
const articleList = [];
const courseList = [];
const productList = [];

</script>

<template>
  <el-container>
    <el-container>
      <el-aside style="margin-top: 20px;">
        <el-card>
          <el-menu default-activity="1">
            <el-menu-item index="1">个人主页</el-menu-item>
            <el-menu-item index="2">个人资料</el-menu-item>
            <el-menu-item index="3">账号设置</el-menu-item>
            <el-menu-item index="4">信息设置</el-menu-item>
            <el-menu-item index="5">标签管理</el-menu-item>
          </el-menu>
        </el-card>
      </el-aside>
      <el-main>
        <el-card>
          <el-row>
            <el-col :span="4">
              <img src="/images/avatar.png" style=" width: 100px; height: 100px">
            </el-col>
            <el-col :span="20">
              <h2>{{ user.username }}</h2>
              <span>性别：{{ user.gender }} | </span>
              <span>岗位：{{ user.post }}</span><br>
              <span>签名档：{{ user.sign }}</span>
              <div style="margin-top: 10px;">
                <router-link to="/user/list">
                  <el-button type="danger" plain style="margin-right: 10px;">我的粉丝</el-button>
                </router-link>
                <router-link to="/user/list">
                  <el-button type="danger" plain>我的关注</el-button>
                </router-link>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <el-card>
          <el-tabs>
            <el-tab-pane label="我发布的文章">
              <div v-if="myArticleList.length > 0">列表数据</div>
              <el-empty v-else description="暂无数据"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="我收藏的文章">
              <div v-if="articleList.length > 0">列表数据</div>
              <el-empty v-else description="暂无数据"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="我收藏的课程">
              <div v-if="courseList.length > 0">列表数据</div>
              <el-empty v-else description="暂无数据"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="我发布的文章">
              <div v-if="productList.length > 0">列表数据</div>
              <el-empty v-else description="暂无数据"></el-empty>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.el-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 新增按钮样式 */
.el-button--danger.is-plain {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}

.el-button--danger.is-plain:hover {
  background: #f56c6c;
  color: white;
}
</style>